/* 变量 */
$public_width: 1200px;
.nav {
    width: $public_width;
    height: 50px;
}

/* 嵌套 */
//css写
.header {
    width: 100%;
    height: 50px;
}
.header .nav {
    width: 1200px;
    height: 50px;
}
.header .nav ul {
    overflow: hidden;
    clear: both;
}
.header .nav ul li {
    float: left;
    padding: 0 20px;
}
.header .nav ul li a {
    color:#999;
}
.header .nav ul li a:hover {
    color: #fff;
}
//scss写
.header {
    width: 100%;
    height: 50px;
    .nav {
        width: 1200px;
        height: 50px;
        ul {
            overflow: hidden;
            clear: both;
            li {
                float: left;
                padding: 0 20px;
                a {
                    color:#999;
                    &:hover {
                        color: #fff;
                    }
                }
            }
        }
    }
}

/* 导入 */
//导入别的scss文件，假设导入reset.scss文件
//@import "./reset.scss"

/* 混合 */
//1.无参数混合
@mixin box() {
    border: 1px solid green;
    margin: 10px;
}
.box1 {
    @include box();
}
//对应的css样式
.box1 {
    border: 1px solid green;
    margin: 10px;
}
//混合也就是把@mixin box()定义的样式通过@include box()混入到.box1中
//2.有参数混合
@mixin box($width, $height, $color:red) {
    width: $width;
    height: $height;
    background-color: $color;
    border: 1px solid green;
    margin: 10px;
}
.box1 {
    @include box(100px, 100px, blue);
}
//对应css样式
.box1 {
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 1px solid green;
    margin: 10px;
}
//带参数混合就是把@include box(100px, 100px, blue)中的实参100px, 100px, blue传到@mixin box($width, $height, $color:red)
//中，100px对应$width，100px对应$height，blue对应$color，默认$color的颜色为red，即是$color:red，不传颜色就是默认色red，之后再传回.box1

/* 继承 */
.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}
.box2 {
    @extend .box1; //继承至box1，box1和box2都有box1的样式，box2另外有box2单独的样式
    border: 1px solid green;
}
//对应css样式
.box1, .box2 {
    width: 100px;
    height: 100px;
    background-color: red;
}
.box2 {
    border: 1px solid green;
}

/* 运算 */
$size: 1000px;
.box {
    width: ($size - 100) * 2;
    height: 100px;
}
//对应css样式
.box {
    width: 1800px;
    height: 100px;
}
//scss样式
$fontSize: 50;
.box1 {
    width: 400px / $fontSize;
}
//对应css样式
.box1 {
    width: 8px;
}